<template>
  <el-row>
    <el-form :model="queryParams" ref="queryForm" size="big" :inline="true">
      <el-form-item label="姓名" prop="nickname">
        <el-input v-model="queryParams.nickname" placeholder="请输入姓名" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" size="big" @click="queryList"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
  </el-row>

  <!-- 分割线 -->
  <div>
    <el-divider> </el-divider>
  </div>

  <el-row v-loading="loading">
    <el-table :data="tableData" style="width: 100%" max-height="750" size="big">
      <el-table-column
        fixed
        prop="id"
        label="序号"
        type="index"
        width="60"
        align="center"
      />
      <el-table-column prop="id" label="用户编号" align="center" width="100" />
      <!-- <el-table-column prop="createTime" label="创建时间" align="center" width="120" /> -->
      <el-table-column prop="username" label="用户名" align="center" />
      <el-table-column prop="nickname" label="姓名" align="center" width="120" />
      <el-table-column prop="sex" label="性别" align="center" />
      <el-table-column prop="email" label="邮箱" align="center" width="200" />
      <el-table-column prop="phoneNumber" label="电话号码" align="center" width="170" />
      <el-table-column prop="isDeleted" label="是否删除" align="center" />
      <el-table-column prop="roleId" label="权限" align="center" />
      <el-table-column prop="status" label="状态" align="center" />
      <el-table-column label="操作" align="center" fixed="right" min-width="200">
        <template #default="scope">
          <div style="display: flex; justify-content: space-around">
            <el-button
              type="primary"
              size="small"
              icon="Edit"
              round
              @click="setServiceObject(scope.row)"
              >设置服务对象</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- v-model 组件里面的数据修改 外面的 queryParams.current 改变，tableData也会改变 -->
    <el-pagination
      layout="sizes ,prev, pager, next, jumper, ->, total,"
      :total="queryParams.total"
      v-model:page-size="queryParams.size"
      v-model:current-page="queryParams.current"
      @current-change="queryList"
      @size-change="queryList"
      :page-sizes="[2, 3, 5, 10, 20]"
    />
  </el-row>

  <!-- <router-view></router-view> -->
</template>

<script setup name="User">
import { onMounted, watch, ref } from "vue";
import { useRouter } from "vue-router";
// import { ref } from "vue";
// 导出添加信息组件
import { listInfo, removeById } from "@/api/permission/user/index";
import { ElMessageBox, ElNotification } from "element-plus";

const router = useRouter();

// 定义加载状态
const loading = ref(true);

// 表格数据
const tableData = ref([]);

// 查询条件
const queryParams = ref({
  nickname: "",
  roleId: 2, // 添加 roleId 参数，默认为 2
  current: 1,
  size: 5,
  total: 0,
});

// 查询方法:在分页的时候使用page 在这基础上 使用await关键字 将返回Promise对象的异步方法变成同步方法
// 查询方法
async function queryList() {
  loading.value = true;
  try {
    const page = await listInfo(queryParams.value);
    loading.value = false;
    tableData.value = page.records;
    queryParams.value.total = page.total; // 更新总条数
  } catch (e) {
    loading.value = false;
  }
}

// 设置服务对象，并跳转到 userToCustomerService 页面
function setServiceObject(row) {
  // 确保row对象中有id和nickname属性
  if (row && row.id && row.nickname) {
    router.push({
      name: "userToCustomerService",
      query: {
        userId: row.id, // 将用户ID作为参数传递给目标路由
        userName: row.nickname, // 将用户名作为参数传递给目标路由
      },
    });
  } else {
    // 可以在这里处理错误情况，例如显示通知
    ElNotification({
      title: "错误",
      message: "用户信息不完整，无法设置服务对象。",
      type: "error",
    });
  }
}

// 加载当前页面完成之后查询
onMounted(() => {
  queryList();
});
</script>

<style scoped>
.insertButton {
  margin: 0px 0px 10px 0px;
}
</style>
